<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.js"></script>

    <!-- 
        地图图表使用方式：
            1、百度地图API
               需要申请百度地图AK
            2、矢量地图
               需要准备矢量地图数据
     -->
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
</body>
<script>
 
    /*
    常见效果
        显示全国空气质量区域：
            不同城市颜色不同:
                1、显示基本的中国地图
                2、城市的空气质量数据设置给series
                3、将series下的数据和geo关联起来
                4、结合visualMap配合使用
    */
   
    没有拿各省的空气质量数据


    var airData=["要和地图中的省份数据一 一对应"]

    var mEcharts = echarts.init(document.querySelector("div"))

    $.get('./json/map/china.json',function(ret){
        echarts.registerMap('chinaMap',ret)
    var option ={
        geo:{
            type:'map',
            map:'chinaMap',
            roam:true
        },
        series:[
            {
                data:airData, //填写和各个省份相对应的数据对象
                geoIndex:0,  //将配置项中的第一个geo作为配置数据
                type:'map'
            }
        ],
        visualMap:{
            min:0,
            max:300,//从什么到什么开始
            inRange:{
                color:['white','red']//控制颜色渐变的范围
            },
            calculable:true//可以筛选条件

        }
    }

    mEcharts.setOption(option)

    })
   
  
</script>
</html>